<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="src/css/layui.css">
    <style>
        .content {
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <!-- 导航 -->
    <ul class="layui-nav">
        <li class="layui-nav-item">
            <a href="javascript:;">用户中心</a>
        </li>
        <li class="layui-nav-item">
            <a href="banner.html">轮播图</a>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">列表</a>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">订单管理</a>
        </li>
        <li class="layui-nav-item">
            <a href=""><img src="https://t.cn/RCzsdCq" class="layui-nav-img">我</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="javascript:;">退了</a></dd>
            </dl>
        </li>
    </ul>
    <!-- 内容 -->
    <div class="content">
        <table id="demo" lay-filter="test"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="detail">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
        </script>
    </div>
    <script src="src/layui.js"></script>
    <script>
        layui.use('table', function() {
            var table = layui.table,
                $ = layui.jquery

            getData()

            function getData() {
                //第一个实例
                table.render({
                    elem: '#demo',
                    height: 312,
                    url: 'server/getUser.php' //数据接口
                        ,
                    page: true //开启分页
                        ,
                    cols: [
                        [ //表头
                            {
                                field: 'id',
                                title: 'ID',
                                sort: true,
                                fixed: 'left'
                            }, {
                                field: 'username',
                                title: '用户名',
                            }, {
                                field: 'password',
                                title: '密码',
                                sort: true
                            }, {
                                fixed: 'right',
                                width: 150,
                                align: 'center',
                                toolbar: '#barDemo'
                            }
                            // , { field: 'city', title: '城市', width: 80 }
                            // , { field: 'sign', title: '签名', width: 177 }
                            // , { field: 'experience', title: '积分', width: 80, sort: true }
                            // , { field: 'score', title: '评分', width: 80, sort: true }
                            // , { field: 'classify', title: '职业', width: 80 }
                            // , { field: 'wealth', title: '财富', width: 135, sort: true }
                        ]
                    ]
                });
            }

            //监听行工具事件
            table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,
                    layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    layer.msg('查看操作');
                } else if (layEvent === 'delete') {
                    $.ajax({
                            url: 'server/delUser.php',
                            data: {
                                id: data.id - 0
                            },
                            type: 'post',
                            success(res) {
                                let obj = JSON.parse(res)
                                layer.msg(obj.msg);
                                getData()
                            }
                        })
                        //下拉菜单
                        // layer.msg('2222');
                        // console.log(data)
                        // dropdown.render({
                        //     elem: this //触发事件的 DOM 对象
                        //     , show: true //外部事件触发即显示
                        //     , data: [{
                        //         title: '编辑'
                        //         , id: 'edit'
                        //     }, {
                        //         title: '删除'
                        //         , id: 'del'
                        //     }]
                        //     , click: function (menudata) {
                        //         if (menudata.id === 'del') {
                        //             layer.confirm('真的删除行么', function (index) {
                        //                 obj.del(); //删除对应行（tr）的DOM结构
                        //                 layer.close(index);
                        //                 //向服务端发送删除指令
                        //             });
                        //         } else if (menudata.id === 'edit') {
                        //             layer.msg('编辑操作，当前行 ID:' + data.id);
                        //         }
                        //     }
                        //     , align: 'right' //右对齐弹出（v2.6.8 新增）
                        //     , style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
                        // })
                }
            });

        });
    </script>
</body>

</html>